<template>
  <div
    class="beam-layout-container plan-manage-container"
    id="plan-manage-container"
  >
    <!-- 顶部查询条件 -->
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <!-- 类别 -->
          <a-select
            placeholder="请选择类别"
            v-model="conditions.type"
            @change="conditionChange()"
          >
            <!-- <a-select-option value="1"> 年计划 </a-select-option> -->
            <a-select-option value="2"> 月计划</a-select-option>
            <!-- <a-select-option value="3"> 周计划 </a-select-option> -->
          </a-select>
          <!-- 年 -->
          <a-date-picker
            v-if="conditions.type == 1"
            mode="year"
            format="YYYY"
            valueFormat="YYYY"
            :value="conditions.plannedTime"
            @panelChange="yearPick"
            @openChange="yearStatus"
            :open="conditions.isopen"
            placeholder="选择年份"
            :allowClear="true"
            class="year-picker"
            @change="conditionChange(1, $event)"
          />
          <!-- 月 -->
          <a-month-picker
            v-if="conditions.type == 2"
            class="month-picker"
            valueFormat="YYYY-MM"
            placeholder="请选择月"
            v-model="conditions.plannedTime"
            @change="conditionChange(2, $event)"
          />
          <!-- 周 -->
          <a-week-picker
            v-if="conditions.type == 3"
            class="week-picker"
            placeholder="请选择周"
            v-model="conditions.plannedTime"
            valueFormat="YYYY-w"
            @change="conditionChange(3, $event)"
          />
        </template>

        <template slot="operate">
          <a-button type="primary" @click="getData()"> 查询 </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="beam-table-container">
      <div class="table-header" header="计划管理">
        <div>
          <a-button
            type="primary"
            v-if="conditions.type && addButtonFlag"
            @click="operateData(0, { category: conditions.type })"
          >
            新增{{ conditions.type | typeName }}计划
          </a-button>
        </div>
      </div>
      <div class="main" v-loading="pageLoading">
        <vxe-table
          ref="xTable"
          height="99%"
          class="scrollbarStyle"
          align="center"
          show-overflow
          show-header-overflow
          :data="tableData"
          :column-config="{ resizable: true }"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column
            show-overflow
            :key="index"
            :title="item.title"
            :field="item.key"
            :width="item.width"
            v-for="(item, index) in columns"
          >
            <template #default="{ row }">
              <!-- 类别 -->
              <div v-if="item.key == 'category'">
                {{ row[item.key] | filterCategoryValue }}
              </div>
              <!-- 计划时间-->
              <div v-else-if="item.key == 'plannedTime'">
                {{ row[item.key] }}<span v-if="row.category == 3">周</span>
              </div>
              <!-- 状态 -->
              <div
                v-else-if="item.key == 'completeStatus'"
                class="status-tip"
                :style="{
                  background: completeStatusStyle(row.completeStatus),
                }"
              >
                {{ row[item.key] | filterCompleteStatusValue }}
              </div>
              <div v-else>{{ row[item.key] }}</div>
            </template>
          </vxe-column>
          <vxe-column field="operate" width="300" title="操作" fixed="right">
            <template #default="{ row }">
              <div class="text-button-group">
                <a-button
                  type="link"
                  v-if="row.record"
                  @click="viewApproveRecord(row)"
                >
                  审批记录
                </a-button>
                <a-button
                  type="link"
                  v-if="row.approve"
                  @click="operateData(1, row)"
                >
                  审批
                </a-button>
                <a-button
                  type="link"
                  v-if="row.back"
                  @click="handleCancelClick(row)"
                >
                  撤回
                </a-button>
                <a-button
                  type="link"
                  v-if="row.view"
                  @click="operateData(2, row)"
                  >查看</a-button
                >
                <a-button
                  type="link"
                  v-if="row.edit"
                  @click="operateData(3, row)"
                  >编辑</a-button
                >
                <a-button
                  type="link"
                  class="danger"
                  v-if="row.del"
                  @click="handleDelClick(row)"
                >
                  删除
                </a-button>
                <a-button
                  type="link"
                  v-if="row.submit"
                  @click="handleSubmitClick(row)"
                  >提交</a-button
                >
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="pager-container">
        <vxe-pager
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              第<span>1</span>到<span
                >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
              >共<span>{{ pager.total }}</span
              >条记录
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
    <!-- 审批记录弹窗 -->
    <aproveRecord
      :visible.sync="approvalRecord.visible"
      :id="rowId"
    ></aproveRecord>
    <!-- 操作页面 -->
    <operate-page
      :visible.sync="operatePage.visible"
      :type="operatePage.type"
      :category="operatePage.category"
      :id="rowId"
    ></operate-page>
  </div>
</template>

<script>
//审批记录弹窗
import aproveRecord from "./components/aproveRecords";
//操作页面
import operatePage from "./views/operatePage.vue";
import moment from "moment";
import { notificationTip } from "@/utils";
import {
  getListData,
  deleteData,
  listSubmitData,
  listCancleData,
  addButtonFlag,
} from "@/api/wisdom-beam/planSchedule-app.js";
export default {
  components: {
    aproveRecord,
    operatePage,
  },
  data() {
    return {
      pageLoading: false,
      popoverVisible: false,
      rowId: "",
      //新增按钮权限
      addButtonFlag: false,
      //审批记录
      approvalRecord: {
        visible: false,
        type: "",
      },
      //操作页面
      operatePage: {
        visible: false,
        type: "",
      },
      //查询条件
      conditions: {
        //类型 默认月计划
        type: "2",
        //计划时间
        plannedTime: "",
        isopen: false,
      },
      columns: [
        {
          title: "类别",
          key: "category",
        },
        {
          title: "计划时间",
          key: "plannedTime",
        },
        {
          title: "编制人",
          key: "fillUser",
        },
        {
          title: "编制时间",
          key: "fillTime",
        },
        {
          title: "状态",
          key: "completeStatus",
        },
      ],
      tableData: [],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },

  filters: {
    typeName(val) {
      let type = Number(val);
      switch (type) {
        case 1:
          return "年";
        case 2:
          return "月";
        case 3:
          return "周";
        default:
          break;
      }
    },
    filterCompleteStatusValue(val) {
      switch (val) {
        case "0":
          return "待提交";

        case "1":
          return "审批中";

        case "2":
          return "审批完成";

        case "4":
          return "计划进行中";

        case "5":
          return "计划延期待完成";

        case "6":
          return "计划已完成";

        case "7":
          return "计划延期完成";

        case "8":
          return "计划未开始";

        default:
          break;
      }
    },

    filterCategoryValue(val) {
      switch (val) {
        case "1":
          return "年计划";

        case "2":
          return "月计划";

        case "3":
          return "周计划";
      }
    },
  },

  mounted() {
    this.getData();
    this.getAddButtonFlag();
  },

  methods: {
    //查询数据列表
    getData() {
      return new Promise((resolve, reject) => {
        let { page, pageSize } = this.pager;
        let { type, plannedTime } = this.conditions;
        this.pageLoading = true;
        getListData({
          page,
          pageSize,
          category: type ?? "",
          plannedTime: plannedTime ?? "",
        })
          .then((res) => {
            let { data } = res;
            let source = data?.result ?? {};
            this.tableData = source?.rows ?? [];
            this.pager.total = source?.total ?? 0;
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.pageLoading = false;
          });
      });
    },

    //查询新增按钮权限
    getAddButtonFlag() {
      return new Promise((resolve, reject) => {
        addButtonFlag()
          .then((res) => {
            let { data } = res;
            this.addButtonFlag = data?.result ?? false;
            resolve();
          })
          .catch((_) => {
            this.addButtonFlag = false;
            reject();
          });
      });
    },

    //操作数据 type 0新增 1审批  2查看  3编辑
    operateData(type = 1, row = {}) {
      let { id } = row;
      let { category } = row;
      this.rowId = id ?? "";
      this.operatePage.type = type;
      this.operatePage.category = category;
      this.operatePage.visible = true;
    },

    //审批记录
    viewApproveRecord(row = {}) {
      let { id } = row;
      this.rowId = id;
      this.approvalRecord.visible = true;
    },

    //提交
    handleSubmitClick(row) {
      let that = this;
      let { id } = row;
      const h = this.$createElement;
      this.$confirm({
        title: "提示",
        content: "您确定提交所选内容吗？",
        okText: "确定",
        okType: "primary",
        cancelText: "取消",
        centered: true,
        icon: () =>
          h("a-icon", {
            props: {
              type: "question-circle",
              theme: "filled",
            },
            style: "color:#FB5A5A",
          }),
        onOk() {
          return new Promise((resolve, reject) => {
            listSubmitData({
              id,
            })
              .then((res) => {
                notificationTip("success", "提交成功!");
                that.getData();
                resolve();
              })
              .catch((_) => {
                reject();
                notificationTip("error", "提交失败!");
              });
          });
        },
        onCancel() {},
      });
    },

    //撤回
    handleCancelClick(row) {
      let that = this;
      let { id } = row;
      const h = this.$createElement;
      this.$confirm({
        title: "您确定撤回所选内容?",
        content: "撤回内容后,将无法恢复。",
        okText: "确定",
        okType: "primary",
        cancelText: "取消",
        centered: true,
        icon: () =>
          h("a-icon", {
            props: {
              type: "question-circle",
              theme: "filled",
            },
            style: "color:#FB5A5A",
          }),
        onOk() {
          return new Promise((resolve, reject) => {
            listCancleData({
              id,
            })
              .then((res) => {
                notificationTip("success", "撤回成功!");
                that.getData();
                resolve();
              })
              .catch((_) => {
                reject();
                notificationTip("error", "撤回失败!");
              });
          });
        },
        onCancel() {},
      });
    },

    //删除
    handleDelClick(row) {
      let that = this;
      let { id } = row;
      const h = this.$createElement;
      this.$confirm({
        title: "您确定删除所选内容?",
        content: "删除内容后,将无法恢复。",
        okText: "确定",
        okType: "primary",
        cancelText: "取消",
        centered: true,
        icon: () =>
          h("a-icon", {
            props: {
              type: "question-circle",
              theme: "filled",
            },
            style: "color:#FB5A5A",
          }),
        onOk() {
          return new Promise((resolve, reject) => {
            deleteData({
              id,
            })
              .then((res) => {
                notificationTip("success", "删除成功!");
                that.getData();
                resolve();
              })
              .catch((_) => {
                reject();
                notificationTip("error", "删除失败!");
              });
          });
        },
        onCancel() {},
      });
    },

    //监听查询条件切换
    conditionChange(type, ev) {
      if (!type) {
        this.conditions.plannedTime = "";
      } else {
        //年计划
        if (type == 1) {
          if (!ev) {
            this.conditions.plannedTime = "";
          }
        }
      }
      this.getData();
    },

    // 选择年
    yearPick(e) {
      this.conditions.plannedTime = moment(e).format("YYYY");
      this.conditions.isopen = false;
      this.getData();
    },

    // 选择年后，关闭弹窗
    yearStatus(status) {
      if (status) {
        this.conditions.isopen = true;
      } else {
        this.conditions.isopen = false;
      }
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getData();
    },

    getPopupContainer() {
      return document.getElementById("plan-manage-container");
    },

    completeStatusStyle(val) {
      switch (val) {
        case "0":
          return "#F1F2F7";

        case "1":
          return "#FF993f";

        case "2":
          return "#0098FF";

        case "4":
          return "#FF7113";

        case "5":
          return "#F33ECB";

        case "6":
          return "#4BC964";

        case "7":
          return "#2BC1B1";

        case "8":
          return "#4981f4";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.plan-manage-container {
  .show-more-button {
    padding: 0 15px;
    position: relative;
    cursor: pointer;
    &::before {
      content: "...";
      position: absolute;
      letter-spacing: 1px;
      font-size: 18px;
      left: 50%;
      top: 50%;
      transform: translatex(-50%);
      margin-top: -15px;
    }
  }
  .main {
    .status-tip {
      min-width: 60px;
      width: fit-content;
      padding: 0 10px;
      height: 26px;
      background: #ff993f;
      border-radius: 2px;
      font-size: 14px;
      color: #fff;
      margin: 0 auto;
      line-height: 26px;
    }
  }
}
</style>
